// @ts-ignore


import React, {ReactNode, useState} from 'react';

import {Button, Image, message, PageHeader, Space} from 'antd';
import {
  brackReUpdate,
  editAgentUpdate,
  editIntegralReChange,
  editUsers,
  editWalletReChange,
  findById
} from '@/services/ant-design-pro/users';
import {useMount, useRequest} from 'ahooks';
import {StatisticCard} from '@ant-design/pro-components';

import RcResizeObserver from 'rc-resize-observer';
import {myWalletStastica} from "@/services/ant-design-pro/stastica";
import {Column, measureTextWidth, Pie, TinyArea} from "@ant-design/plots";
import FormModalBtn from "@/components/FormModalBtn";
import {getResult} from "@/services/ant-design-pro/attribute";
import {
  findByAgentBySelectList,
  findByMiniAgentList,
  findByPageBackAgentReChangeList
} from "@/services/ant-design-pro/agent";
import {useLocation} from "umi";
import {
  findByAddressBackLogList,
  findByBackIntegralLogList,
  findByWalletBackLogList
} from "@/services/ant-design-pro/log";
import {defaultPagination, paginationTool} from "@/utils/util";
import {Link} from "@umijs/preset-dumi/lib/theme";
import ProCard from "@ant-design/pro-card";
import ProDescriptions from '@ant-design/pro-descriptions';
import {ProTable} from '@ant-design/pro-table';

import {ProFormSelect} from "@ant-design/pro-form";
import {posterRegesterQrcode} from "../../services/ant-design-pro/poster";

const {Statistic} = StatisticCard;
const statisticData = new Map<string, ReactNode> ();
const getAttr = async (key: string) => {
  return await getResult ( key, 1 );
};

const addressLogColmuns = [{
  title: "姓名",
  key: "name",
  dataIndex: "name",
  search: false,
},  {
  title: "地址",
  key: "address",
  dataIndex: "address",
  search: false,
}, {
  title: "地址详细",
  key: "addressInfo",
  dataIndex: "addressInfo",
  search: false,
}, {
  title: "手机号",
  key: "phoneNumber",
  dataIndex: "phoneNumber",
  search: false,
}]


const walletLogColmuns = [{
  title: "用户姓名",
  key: "name",
  dataIndex: "name",
  search: false,
}, {
  title: "动作",
  key: "stateName",
  dataIndex: "stateName",
  search: false,
}, {
  title: "操作帐户",
  key: "type",
  dataIndex: "type",
  valueType: "select",
  valueEnum: await getResult ( "userswithdrawaltype", 0 ),
  search: false,

}, {
  title: "操作金额",
  key: "price",
  dataIndex: "price",
  valueType: "money",
  search: false,
}, {
  title: "当前余额",
  key: "balance",
  dataIndex: "balance",
  valueType: "money",
  search: false,
}, {
  title: "详细说明",
  key: "remark",
  dataIndex: "remark",
  search: false,
}, {
  title: "申请时间",
  key: "create_date",
  dataIndex: "create_date",
  valueType: 'dateTime'
}, {
  title: "操作员",
  key: "operatorName",
  dataIndex: "operatorName",
  search: false,
}]

const walletLogColmunsIntgrall = [{
  title: "用户姓名",
  key: "name",
  dataIndex: "name",
  search: false,
}, {
  title: "动作",
  key: "stateName",
  dataIndex: "stateName",
  search: false,
}, {
  title: "操作帐户",
  key: "type",
  dataIndex: "type",
  valueType: "select",
  valueEnum: await getResult ( "userswithdrawaltype", 0 ),

  search: false,

}, {
  title: "操作金额",
  key: "integral",
  dataIndex: "integral",
  search: false,
}, {
  title: "当前余额",
  key: "integraln",
  dataIndex: "integraln",
  search: false,
}, {
  title: "详细说明",
  key: "remark",
  dataIndex: "remark",
  search: false,
}, {
  title: "申请时间",
  key: "create_date",
  dataIndex: "create_date",
  valueType: 'dateTime'
}, {
  title: "操作员",
  key: "operatorName",
  dataIndex: "operatorName",
  search: false,
}]
const reChangeLogColmuns = [{
  title: "用户姓名",
  key: "name",
  dataIndex: "name",
  search: false,
}, {
  title: "原等级",
  key: "oldAgentName",
  dataIndex: "oldAgentName",
  search: false,
}, {
  title: "原管理上级",
  key: "oldParentUserName",
  dataIndex: "oldParentUserName",
  search: false,
}, {
  title: "新等级",
  key: "agentName",
  dataIndex: "agentName",
  search: false,
}, {
  title: "新管理上级",
  key: "parentUserName",
  dataIndex: "parentUserName",
  search: false,
}, {
  title: "备注说明",
  key: "remark",
  dataIndex: "remark",
  search: false,
}, {
  title: "申请时间",
  key: "create_date",
  dataIndex: "create_date",
  valueType: 'dateTime'
}, {
  title: "操作员",
  key: "operatorName",
  dataIndex: "operatorName",
  search: false,
}]
const Detailed: React.FC = () => {
  const {query} = useLocation ();
  const [responsive, setResponsive] = useState ( false );
  const [statisticDataInfo, setStasticaDataInfo] = useState ()
  const [agentChart, setAgentChart] = useState ( [] )
  const [agentChartCount, setAgentChartCount] = useState ( 0 )
  const [qrcode, setQrcode] = useState ();

  const [agent, setAgent] = useState<any> ()
  const [paginationWalletLog, setPaginationWalletLog] = useState<API.Pagination> ( defaultPagination );
  const [paginationWalleIntegraltLog, setPaginationWalletIntegralLog] = useState<API.Pagination> ( defaultPagination );
  const [paginationAgentReChangetLog, setPaginationAgentReChangeLog] = useState<API.Pagination> ( defaultPagination );
  const [paginationAddressReChangetLog, setPaginationAddressReChangeLog] = useState<API.Pagination> ( defaultPagination );
  const {
    run: fetchById,
    refresh,
    data: data,
    loading,
  } = useRequest ( findById, {
    debounceWait: 100,
    manual: true,
  } );

  const {
    run: fetchByWalletBackLogList,
    refresh: walletLogRefresh,
    data: dataWalletLog,
    loading: walletLogLoading,
  } = useRequest ( findByWalletBackLogList, {
    debounceWait: 100,
    manual: true,
  } );
  const {
    run: fetchByAddressBackLogList,
    refresh: addressLogRefresh,
    data: dataAddressLog,
    loading: addressLogLoading,
  } = useRequest ( findByAddressBackLogList, {
    debounceWait: 100,
    manual: true,
  } );
//
  const {
    run: fetchByByPageBackAgentReChangeBackLogList,
    refresh: backAgentReChangeRefresh,
    data: dataByPageBackAgentReChangeLog,
    loading: ByPageBackAgentReChangeLogLoading,
  } = useRequest ( findByPageBackAgentReChangeList, {
    debounceWait: 100,
    manual: true,
  } );


  const {
    run: fetchByBackIntegralLogList,
    refresh: walletIntegralLogRefresh,
    data: walletIntegralLog,
    loading: walletIntegralLogLoading,
  } = useRequest ( findByBackIntegralLogList, {
    debounceWait: 100,
    manual: true,
  } );

  const {
    run: fetchByAgentList,
    runAsync: fetchByAgentListAsync,
    refresh: findAgentRefresh,
    data: findAgentLog,
    loading: findAgentLoading,
  } = useRequest ( findByMiniAgentList, {
    debounceWait: 100,
    manual: true,
  } );


  const {

    runAsync: fetchByPosterRegesterQrcode,

  } = useRequest ( posterRegesterQrcode, {
    debounceWait: 100,
    manual: true,
  } );

  useMount ( () => {
    console.log ( 'paramsparamsparams', walletLogLoading )
    fetchById ( query?.userId );
    fetchByPosterRegesterQrcode(query?.userId).then(res=>{
      setQrcode(res?.data)
    })
    myWalletStastica ( query?.userId ).then ( res => {
      console.log ( res )
      let data = res?.data;
      if (data != undefined) {
        setStasticaDataInfo ( data )
        //  let areas:ReactNode[]=[]
        statisticData.set ( "years", getStasticaConfig ( data?.years ) )
        statisticData.set ( "month", getStasticaConfig ( data?.month ) )
        statisticData.set ( "weeks", getStasticaConfig ( data?.weeks ) )
        statisticData.set ( "oval", getPieOvalChart ( data?.oval ) )
      }

      //    areas.push(getStasticaConfig(data['years']))
      //    areas.push(getStasticaConfig(data['years']))
      //  setStasticaData(areas)

    } )
    findByAgentBySelectList ().then ( res => {
      console.log ( res )
      setAgent ( res )
    } )
    fetchByWalletBackLogList ( {userId: query?.userId} )
    fetchByBackIntegralLogList ( {userId: query?.userId} )
    fetchByAddressBackLogList ( {userId: query?.userId} )
    fetchByByPageBackAgentReChangeBackLogList ( {userId: query?.userId} )
//    fetchByAgentList ( query?.userId )
    fetchByAgentListAsync ( query?.userId ).then ( res => {
      let data = res.data;
      setAgentChart ( data.list )
      setAgentChartCount ( data.count )
      console.log ( "------------------------------------------", res )
    } )
  } );

  function getStasticaConfig(data: []) {
    console.log ( "getStasticaConfig", data )
    const config = {
      height: 140,
      autoFit: false,
      data: data,
      smooth: true,
      areaStyle: {
        fill: '#d6e3fd',
      },
    };
    return <TinyArea {...config} />;

  }

  // @ts-ignore
  return (<>
      <ProCard
        title={
          <PageHeader
            onBack={() => window.history.back ()}
            title={'用户详细'}
            subTitle={data?.nickname}
          />
        }
      >

        <ProDescriptions<API.Users>
          title={data?.name}
          dataSource={data}
          columns={[
            {
              title: '头像',
              key: 'avatar',
              dataIndex: 'avatar',
              valueType: 'avatar',

              // render:((dom, entity, index, action, schema) => {
              //   return (<Image width={100} src={dom}  height={100} />)
              // })
            },
            {
              title: '手机号',
              key: 'phone',
              dataIndex: 'phone',
            },
            {
              title: '邀请手机号',
              key: 'parentPhone',
              dataIndex: 'parentPhone',
            },
            {
              title: '授权编号',
              key: 'invite',
              dataIndex: 'invite',
            },
            {
              title: '代理等级',
              key: 'agentName',
              dataIndex: 'agentName',
            },
            {
              title: '邀请人',
              key: 'parentName',
              dataIndex: 'parentName',
            },
            {
              title: '金额',
              key: 'balance',
              dataIndex: 'balance',
              valueType: 'money',
            },
            {
              title: '授权编号',
              key: 'invite',
              dataIndex: 'invite',
            }, {
              title: '身份证号',
              key: 'idCard',
              dataIndex: 'idCard',
            }, {
              title: '联系地址',
              key: 'address',
              dataIndex: 'address',
            }, {
              title: '微信平台号',
              key: 'openId',
              dataIndex: 'openId',
              valueType: "password"
            }, {
              title: '银行名称',
              key: 'bankName',
              dataIndex: 'bankName',
            }, {
              title: '银行卡号',
              key: 'bankCard',
              dataIndex: 'bankCard',
            }, {
              title: '银行地址',
              key: 'BankAddress',
              dataIndex: 'BankAddress',
            }
          ]}
        ></ProDescriptions>
        <Image src={qrcode} width={100} height={100}/>
      </ProCard>
      <div className="mt-10">
        <RcResizeObserver
          key="resize-observer"
          onResize={(offset) => {
            setResponsive ( offset.width < 596 );
          }}
        >
          <ProCard split={responsive ? 'horizontal' : 'vertical'}>

            <StatisticCard.Group
              colSpan={responsive ? 24 : 18}
              direction={responsive ? 'column' : undefined}
            >
              <StatisticCard
                statistic={{
                  title: "财年业绩目标",
                  value: data?.balance,
                  prefix: '¥'
                }}
                chart={statisticData.get ( "oval" )}
                footer={
                  <>
                    <Statistic prefix="¥" value={data?.withdrawalWait} title="提现中" layout="horizontal"/>
                    <Statistic prefix="¥" value={data?.withdrawal} title="总提现" layout="horizontal"/>
                    <Statistic value={data?.withdrawaCount} title="提现总数" layout="horizontal"/>
                  </>
                }
              />
              <StatisticCard
                statistic={{
                  title: '财年总收入',
                  prefix: '¥',
                  value: statisticDataInfo?.yearcountallyear,
                  description: <Statistic title="日同比"
                                          value={statisticDataInfo?.yearcountall}
                                          trend="down"/>,
                }}
                className={"miniStastica"}
                chart={statisticData.get ( "years" )}
              >
                <Statistic
                  title="大盘总收入"
                  prefix="¥"
                  value={statisticDataInfo?.yearcountallyearout}
                  layout="vertical"
                  description={<Statistic title="日同比" value={statisticDataInfo?.yearcountallout} trend="up"/>}
                />
              </StatisticCard>
              <StatisticCard
                statistic={{
                  title: '当日排名',
                  value: 0,
                  description: <Statistic title="日同比" value="3.85%" trend="down"/>,
                }}
                chart={statisticData.get ( "month" )}
              >
                <Statistic
                  title="近7日收入"
                  value={statisticDataInfo?.monthcount}
                  layout="vertical"
                  description={<Statistic title="日同比" value="6.47%" trend="up"/>}
                />
              </StatisticCard>
              <StatisticCard
                statistic={{
                  title: '财年业绩收入排名',
                  value: 0,
                  description: <Statistic title="日同比" value="6.47%" trend="up"/>,
                }}
                chart={statisticData.get ( "weeks" )}
              >
                <Statistic
                  title="月付费个数"
                  value={statisticDataInfo?.weekscount}
                  layout="vertical"
                  description={<Statistic title="日同比" value="6.47%" trend="down"/>}
                />
              </StatisticCard>
            </StatisticCard.Group>
          </ProCard>
          <ProCard>
            <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
              <StatisticCard
                statistic={{
                  title: '总流量(人次)',
                  value: agentChartCount,
                }}
                chart={
                  findAgentLoading ? '' :
                    <Column style={{height: '200px'}} data={agentChart} xField={"name"} yField={"count"}/>}
              />


            </StatisticCard.Group>
            {/*           <ProTable showHeader={false} toolBarRender={false} search={false} pagination={false}
                      columns={[{title: "HH", dataIndex: "name"}, {title: "HH", dataIndex: "count"}]}
                      dataSource={findAgentLog?.data?.list}></ProTable>*/}
          </ProCard>

        </RcResizeObserver>
        <ProCard>
          <Space>
            <FormModalBtn initialValues={{name: data?.name, userId: data?.id}} title="财务调整" btnText="财务调整" columns={[{
              title: "userId", dataIndex: 'userId',
              key: 'userId',
              width: 'md',
              readonly: true,
              formItemProps: {
                hidden: true
              }

            }, {
              title: "姓名", dataIndex: 'name',
              key: 'name',
              width: 'md',
              readonly: true,

            }, {
              title: "财务动作", dataIndex: 'state',
              key: 'state',
              width: 'md',
              valueType: "select",
              request: () => {
                return getAttr ( "usersblancewithdrawaltype" );
              }, formItemProps: {
                debounceTime: 300,
                rules: [
                  {
                    required: true
                  }
                ]
              }
            }, {
              title: "金额", dataIndex: 'price',
              key: 'price',
              width: 'md',
              valueType: "money",
              fieldProps: {
                help: "gggggggggggggggggggggggg"
              }, formItemProps: {
                rules: [
                  {
                    required: true
                  }
                ]
              }


            }, {
              title: "处理类型", dataIndex: 'type',
              key: 'type',
              width: 'md',
              valueType: "select",
              request: () => {
                return getResult ( "userswithdrawaltype", 1 );
              }, formItemProps: {
                debounceTime: 300,
                rules: [
                  {
                    required: true
                  }
                ]
              }
            }, {
              title: "备注", dataIndex: 'remark',
              key: 'remark',
              width: 'md',
              valueType: "textarea", formItemProps: {
                rules: [
                  {
                    required: true
                  }
                ]
              }
            }]} request={editWalletReChange}/>


            <FormModalBtn initialValues={{name: data?.name, userId: data?.id}} title="积分调整" btnText="积分调整" columns={[{
              title: "userId", dataIndex: 'userId',
              key: 'userId',
              width: 'md',
              readonly: true,
              formItemProps: {
                hidden: true
              }

            }, {
              title: "姓名", dataIndex: 'name',
              key: 'name',
              width: 'md',
              readonly: true,

            }, {
              title: "积分动作", dataIndex: 'state',
              key: 'state',
              width: 'md',
              valueType: "select",

              request: () => {
                return getAttr ( "usersblancewithdrawaltype" );
              }, formItemProps: {
                debounceTime: 300,
                rules: [
                  {
                    required: true
                  }
                ]
              }
            }, {
              title: "积分", dataIndex: 'integral',
              key: 'integral',
              width: 'md',
              valueType: "number",
              formItemProps: {
                rules: [
                  {
                    required: true
                  }
                ]
              }


            }, {
              title: "备注", dataIndex: 'remark',
              key: 'remark',
              width: 'md',
              valueType: "textarea", formItemProps: {
                rules: [
                  {
                    required: true
                  }
                ]
              }
            }]} request={editIntegralReChange}/>

            <Button type="primary">添加优惠券</Button>
            <FormModalBtn width={1100} initialValues={data} title="资料修改" btnText="资料修改" columns={[
              {
                title: "id", dataIndex: 'id',
                key: 'id',
                width: 'md',
                readonly: true,
                formItemProps: {
                  hidden: true
                }

              }, {
                title: "用户基础资料",
                dataIndex: 'users',
                key: 'users',
                valueType: "group",
                columns: [{
                  title: "授权编号", dataIndex: 'invite',
                  key: 'invite',
                  width: 'sm'

                }, {
                  title: "用户姓名", dataIndex: 'nickname',
                  key: 'nickname',
                  width: 'sm'

                }, {
                  title: "手机号码", dataIndex: 'phone',
                  key: 'phone',
                  width: 'sm'

                }, {
                  title: "账号", dataIndex: 'userName',
                  key: 'userName',
                  width: 'sm'

                }, {
                  title: "登录密码", dataIndex: 'password',
                  key: 'password',
                  width: 'sm',
                  valueType: "password"

                }]

              }, {
                title: "认证资料",
                dataIndex: 'users',
                key: 'users',
                valueType: "group",
                columns: [
                  {
                    title: "认证姓名", dataIndex: 'name',
                    key: 'name',
                    width: 'sm'

                  }, {
                    title: "身份证号", dataIndex: 'idCard',
                    key: 'idCard',
                    width: 'sm'

                  }, {
                    title: "微信号", dataIndex: 'wechat',
                    key: 'wechat',
                    width: 'sm'

                  }, {
                    title: "联系地址", dataIndex: 'address',
                    key: 'address',
                    width: 'sm'

                  }, {
                    title: "银行名称", dataIndex: 'bankName',
                    key: 'bankName',
                    width: 'sm'

                  }, {
                    title: "银行卡号", dataIndex: 'bankCard',
                    key: 'bankCard',
                    width: 'sm'

                  }, {
                    title: "银行地址", dataIndex: 'bankAddress',
                    key: 'bankAddress',
                    width: 'sm'

                  }]
              }, {
                title: "用户授权信息",
                dataIndex: 'agent',
                key: 'agent',
                valueType: "group",
                columns: [
                  {
                    title: "代理等级", dataIndex: 'agentId',
                    key: 'agentId',
                    width: 'sm',
//request:()=>{return findByAgentBySelectList()}
                    renderFormItem: () => <ProFormSelect debounceTime={300} request={async () => {
                      return await findByAgentBySelectList ();
                    }}/>
                  }, {
                    title: "管理上级", dataIndex: 'parentUser',
                    key: 'parentUser',
                    width: 'sm'

                  }]
              }]} request={editUsers}/>
            <Button type="primary">云仓调整</Button>
            <Link target="_blank" to={'/users/tree?userId=' + data?.id} type="link">管理树形图</Link>
            <FormModalBtn
              initialValues={{name: data?.name, id: data?.id, agentName: data?.agentName, parentName: data?.parentName}}
              title="代理升级" btnText="代理升级" columns={[{
              title: "userId", dataIndex: 'id',
              key: 'id',
              width: 'md',
              readonly: true,
              formItemProps: {
                hidden: true
              }

            }, {
              title: "姓名", dataIndex: 'name',
              key: 'name',
              width: 'md',
              readonly: true,

            }, {
              title: "当前等级", dataIndex: 'agentName',
              key: 'agentName',
              width: 'md',
              readonly: true,
            }, {
              title: "当前管理上级", dataIndex: 'parentName',
              key: 'parentName',
              readonly: true,
              width: 'md',
            }, {
              title: "升级等级", dataIndex: 'agentId',
              key: 'agentId',
              width: 'sm',
//request:()=>{return findByAgentBySelectList()}
              renderFormItem: () => <ProFormSelect debounceTime={300} request={async () => {
                return await findByAgentBySelectList ();
              }}/>
            }]} request={editAgentUpdate}/>


            {data?.agentState == 1 ? <Button type="primary" danger onClick={() => {
              let param = {id: data?.id, state: 0, type: 1};
              brackReUpdate ( param ).then ( (res: any) => {

                console.log ( "操作", res );
                let success = res.success
                if (success) {
                  message.success ( "操作成功" )
                  refresh ();
                } else {
                  message.error ( "操作失败" )

                }
              } ).catch ( (error: any) => {
                message.error ( "操作失败" )

              } )
            }}>取消激活</Button> : ""}

            <Button type="primary" danger onClick={() => {
              let param = {id: data?.id, state: data?.status == 0 ? 2 : 0, type: 2};
              brackReUpdate ( param ).then ( (res: any) => {

                console.log ( "操作", res );
                let success = res.success
                if (success) {
                  message.success ( "操作成功" )
                  refresh ();
                } else {
                  message.error ( "操作失败" )

                }
              } ).catch ( (error: any) => {
                message.error ( "操作失败" )

              } )
            }}>{data?.status ? "加入黑名单" : "加入白名单"}</Button>

          </Space>
        </ProCard>
      </div>

      <div>
        <ProCard style={{marginTop: 10 + 'px'}}
                 tabs={{
                   type: 'card',
                 }}
        >
          <ProCard.TabPane key="tab1" tab="财务日志记录">
            <ProTable loading={walletLogLoading}
                      pagination={paginationTool ( paginationWalletLog, dataWalletLog?.data?.total, (data1: API.Pagination) => {
                        console.log ( data1 )
                        setPaginationWalletLog ( data1 );
                        fetchByWalletBackLogList ( {...paginationWalletLog, userId: data?.id} );
                      } )} toolBarRender={false} search={false} columns={walletLogColmuns}
                      dataSource={dataWalletLog?.data?.list}></ProTable>
          </ProCard.TabPane>
          <ProCard.TabPane key="tab2" tab="积分日志记录">
            <ProTable loading={walletIntegralLogLoading}
                      pagination={paginationTool ( paginationWalleIntegraltLog, walletIntegralLog?.data?.total, (data1: API.Pagination) => {
                        console.log ( data1 )
                        setPaginationWalletIntegralLog ( data1 );
                        fetchByBackIntegralLogList ( {...paginationWalletLog, userId: data?.id} );
                      } )} toolBarRender={false} search={false} columns={walletLogColmunsIntgrall}
                      dataSource={walletIntegralLog?.data?.list}></ProTable>
          </ProCard.TabPane>
          <ProCard.TabPane key="tab3" tab="云仓库存变动记录">
            内容二
          </ProCard.TabPane>
          <ProCard.TabPane key="tab4" tab="等级/关系变动记录">
            <ProTable loading={ByPageBackAgentReChangeLogLoading}
                      pagination={paginationTool ( paginationAgentReChangetLog, dataByPageBackAgentReChangeLog?.data?.total, (data1: API.Pagination) => {
                        console.log ( data1 )
                        setPaginationAgentReChangeLog ( data1 );
                        fetchByByPageBackAgentReChangeBackLogList ( {
                          ...paginationAgentReChangetLog,
                          userId: data?.id
                        } );
                      } )} toolBarRender={false} search={false} columns={reChangeLogColmuns}
                      dataSource={dataByPageBackAgentReChangeLog?.data?.list}></ProTable>
          </ProCard.TabPane>

          <ProCard.TabPane key="tab5" tab="发货地址">
            <ProTable loading={addressLogLoading}
                      pagination={paginationTool ( paginationAddressReChangetLog, dataAddressLog?.data?.total, (data1: API.Pagination) => {
                        console.log ( data1 )
                        setPaginationAddressReChangeLog ( data1 );
                        fetchByAddressBackLogList ( {...paginationAddressReChangetLog, userId: data?.id} );
                      } )} toolBarRender={false} search={false} columns={addressLogColmuns}
                      dataSource={dataAddressLog?.data?.list}></ProTable>
          </ProCard.TabPane>
        </ProCard>
      </div>


    </>
  );
};

export default Detailed;

function getPieOvalChart(data: []) {
  function renderStatistic(containerWidth: number, text: string, style: { fontSize: number; }) {
    const {width: textWidth, height: textHeight} = measureTextWidth ( text, {fontSize: 10} );
    const R = containerWidth / 2; // r^2 = (w / 2)^2 + (h - offsetY)^2

    let scale = 1;

    if (containerWidth < textWidth) {
      scale = Math.min ( Math.sqrt ( Math.abs ( Math.pow ( R, 2 ) / (Math.pow ( textWidth / 2, 2 ) + Math.pow ( textHeight, 2 )) ) ), 1 );
    }

    const textStyleStr = `width:${containerWidth}px;`;
    return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
  }

  /*
    const data = [
      {
        type: '分类一',
        value: 27,
      },
      {
        type: '分类二',
        value: 25,
      },
      {
        type: '分类三',
        value: 18,
      },
      {
        name: '分类四',
        value: 15,
      },
      {
        name: '分类五',
        value: 10,
      },
      {
        name: '其他',
        value: 5,
      },
    ];*/
  const config = {
    height: 150,
    width: 150,
    appendPadding: 5,
    data,
    angleField: 'value',
    colorField: 'name',
    radius: 1,
    innerRadius: 0.64,
    meta: {
      value: {
        formatter: (v: any) => `${v} ¥`,
      },
    },
    label: {
      type: 'inner',
      offset: '-50%',
      style: {
        textAlign: 'center',
        fontSize: '12px'
      },
      autoRotate: false,
      content: '{value}',
    },
    statistic: {
      title: {
        offsetY: -4,
        fontSize: '12px',
        customHtml: (container: { getBoundingClientRect: () => { width: any; height: any; }; }, view: any, datum: { name: any; }) => {
          const {width, height} = container.getBoundingClientRect ();
          const d = Math.sqrt ( Math.pow ( width / 2, 2 ) + Math.pow ( height / 2, 2 ) );
          const text = datum ? datum.name : '总计';
          return renderStatistic ( d, text, {
            fontSize: 10,
          } );
        },
      },
      content: {
        offsetY: 4,
        style: {
          fontSize: '12px',
        },
        customHtml: (container: { getBoundingClientRect: () => { width: any; }; }, view: any, datum: { value: any; }, data: any[]) => {
          const {width} = container.getBoundingClientRect ();
          const text = datum ? `¥ ${datum.value}` : `¥ ${data.reduce ( (r, d) => r + d.value, 0 )}`;
          return renderStatistic ( width, text, {
            fontSize: 12,
          } );
        },
      },
    },
    // 添加 中心统计文本 交互
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
      {
        type: 'pie-statistic-active',
      },
    ],
  };
  return <Pie {...config} />;
}
